<script setup>

// 引入echarts的所有组件
import CoachCount from "@/components/charts/CoachCount.vue";
import Total from "@/components/charts/Total.vue";
import HotCourse from "@/components/charts/HotCourse.vue";
import UserReserve from "@/components/charts/UserReserve.vue";
import ReserveCount from "@/components/charts/ReserveCount.vue";
</script>

<template>
    <div class="container">
        <el-row>
            <el-col :span="15">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 150px">
                            <Total></Total>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 400px">
                            <UserReserve></UserReserve>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 200px">
                            <ReserveCount></ReserveCount>
                        </div>
                    </el-col>
                </el-row>
            </el-col>

            <el-col :span="9">
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 325px">
                            <CoachCount></CoachCount>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div style="width: 100%; height: 445px">
                            <HotCourse></HotCourse>
                        </div>
                    </el-col>
                </el-row>
            </el-col>

            <!--            <el-col :span="6">
                            <el-row>
                                <el-col :span="24">
                                    <div style="width: 100%; height: 325px">
                                        <CoachCount></CoachCount>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <div style="width: 100%; height: 445px">
                                        <HotCourse></HotCourse>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>-->
        </el-row>
    </div>
</template>

<style scoped>
.container {
    /* background-image: radial-gradient(50% 50% at 50% 70%, #545C64, #1A232A); */
    /* border: 1px solid #01093D; */
    min-height: 100%;
    background-color: #F5F5F5;

}

.container > .el-row {
    /* background-color: #FFF; */
    padding: 15px;
}

.title {
    text-align: center;
    color: #1A232A;
    /* font-weight: bold; */
    font-size: 36px;
    /* background-color: #091440; */
}

.el-col .el-col {
    background-color: #FFF;
    /* border: 1px solid #58A6FE; */
    border-radius: 5px;
}

.el-row .el-row {
    margin-bottom: 15px;
    margin-right: 15px;
}

</style>